<template>
	<div>
		<a-watermark v-bind="config">
			<slot />
		</a-watermark>
		<a-drawer :visible="visible" :width="380" title="水印设置" :footer="false" @cancel="handleCancel" @before-open="handleBeForOpen">
			<a-form :model="config" layout="vertical">
				<a-form-item field="content" label="水印内容">
					<a-input v-model="config.content" placeholder="请输入" />
				</a-form-item>
				<a-form-item field="fontSize" label="字体大小">
					<a-slider
						v-model="config.fontSize"
						:min="1"
						:max="100"
						style="
							 {
								width: 100%;
							}
						"
					/>
				</a-form-item>
				<a-form-item field="zIndex" label="层级">
					<a-slider
						v-model="config.zIndex"
						:min="1"
						:max="100"
						style="
							 {
								width: 100%;
							}
						"
					/>
				</a-form-item>
				<a-form-item field="rotate" label="旋转">
					<a-slider
						v-model="config.rotate"
						:min="-180"
						:max="180"
						style="
							 {
								width: 100%;
							}
						"
					/>
				</a-form-item>
				<a-form-item field="gap" label="间隔">
					<a-space :size="10">
						<a-input-number :disabled="!config.content" v-model="config.gap[0]" placeholder="X" />
						<a-input-number :disabled="!config.content" v-model="config.gap[1]" placeholder="Y" />
					</a-space>
				</a-form-item>
				<a-form-item field="offset" label="偏移">
					<a-space :size="10">
						<a-input-number :disabled="!config.content" v-model="config.offset[0]" placeholder="左部偏移" />
						<a-input-number :disabled="!config.content" v-model="config.offset[1]" placeholder="顶部偏移" />
					</a-space>
				</a-form-item>
			</a-form>
		</a-drawer>
	</div>
</template>

<script setup lang="ts">
interface IProps {
	visible?: boolean
	value?: any
}
const emits = defineEmits(["handleWaterChange", "handleWaterModalClose"])
const props = defineProps<IProps>()
const config = reactive({
	content: "",
	color: "rgba(0, 0, 0, 0.15)",
	fontSize: 16,
	zIndex: 11,
	rotate: -22,
	gap: [100, 100],
	offset: [0, 0],
})

const handleCancel = () => {
	// emits("handleWaterModalClose")
}
const handleBeForOpen = () => {
	// if (props.value && props.value.content) {
	// 	Object.assign(config, props.value)
	// }
}
// watch(
// 	config,
// 	(newConfig, oldConfig) => {
// 		emits("handleWaterChange", newConfig)
// 	},
// 	{ deep: true }
// )
</script>

<style scoped></style>

